<template>
  <a-modal
    title="打卡"
    :width="900"
    v-model="modelVisible"
    @ok="handleOk"
    :destroyOnClose="true"
    :confirmLoading="confirmLoading"
    centered
    :maskClosable="false"
  >
    <a-form-model ref="ruleForm" :model="selectInfo" :rules="rules">
      <a-row class="form-row" type="flex">
        <a-col :span="20" :offset="1" style="padding-top:5px;">
          <a-form-model-item
            :labelCol="{xs: { span: 12 },sm: { span: 4 }}"
            :wrapperCol="{xs: { span: 12 },sm: { span: 20 }}"
            label="打卡日期"
          >{{ selectInfo.dksj }}</a-form-model-item>
        </a-col>
        <a-col :span="20" :offset="1" style="padding-top:5px;">
          <a-form-model-item
            :labelCol="{xs: { span: 12 },sm: { span: 4 }}"
            :wrapperCol="{xs: { span: 12 },sm: { span: 20 }}"
            label="打卡内容"
            prop="bz"
          >
            <!-- <a-input v-model="selectInfo.gznr" :disabled="operate=='detile'?'disabled':false" /> -->
            <a-textarea
              v-model="selectInfo.bz"
              placeholder="请输入工作内容"
              :auto-size="{ minRows: 8, maxRows: 8 }"
              :maxLength="600"
            />
          </a-form-model-item>
        </a-col>
        <a-divider>打卡记录</a-divider>
        <a-col :span="22" :offset="1">
          <a-spin :spinning="tableLoading">
            <a-table bordered :columns="columns" :data-source="workClockList">{{ text }}</a-table>
          </a-spin>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>
<script>
import { mapGetters } from 'vuex'
import moment from 'moment'
import { method, query } from '@/api/admin'

export default {
  components: {},
  computed: {
    ...mapGetters(['userInfo'])
  },
  data () {
    return {
      form: this.$form.createForm(this),
      modelVisible: false, // 弹出框显示
      confirmLoading: false, // Loading
      tableLoading: false,
      selectInfo: {},
      rules: {
        bz: [{ required: true, message: '请输入打卡内容', trigger: 'blur' }]
      },
      workClockList: [],
      columns: [
        {
          title: '打卡日期',
          dataIndex: 'dksj',
          key: 'dksj',
          width: 180
        },
        {
          title: '打卡内容',
          dataIndex: 'bz',
          key: 'bz',
          ellipsis: true,
          scopedSlots: { customRender: 'bz' }
        }
      ]
    }
  },
  created () {},
  methods: {
    open (record) {
      const vm = this
      this.tableLoading = true
      this.selectInfo = {}
      this.modelVisible = true
      this.selectInfo.dksj = moment()
        .locale('zh-cn')
        .format('YYYY-MM-DD HH:mm:ss')
      this.selectInfo.workInfoId = record.id
      // 获取打卡记录
      query('/par/parworkinfo/listClock', 'GET', record).then(res => {
        vm.workClockList = res.result.data
        vm.tableLoading = false
      })
    },
    // 确认
    handleOk () {
      const vm = this
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          vm.confirmLoading = true
          vm.actionParam = {
            // 请求参数
            url: '/par/parworkinfo/insertClock',
            action: 'POST',
            parameter: {},
            data: vm.selectInfo,
            message: '打卡成功'
          }
          // 调用请求
          method(vm.actionParam).then(res => {
            vm.confirmLoading = false
            // 关闭弹窗
            vm.modelVisible = false
            vm.$emit('result')
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style scoped>
.text-overflow {
  display: block; /*内联对象需加*/
  word-break: keep-all; /* 不换行 */
  white-space: nowrap; /* 不换行 */
}
</style>
